import React,{useState} from "react";
import { ResultPage, Card, Switch, Button } from "antd-mobile";
import styles from "./index.module.css";
import { useSelector, useDispatch } from "react-redux";
import {useNavigate} from "react-router-dom"
import { Exchange } from "@react-vant/icons";
import { EXchangeCity,editchangeTime } from "../../store/CitySlice";
import { Popup, Space,CalendarPickerView  } from "antd-mobile";
import dayjs from "dayjs";
function Index() {
  const { start, end ,date} = useSelector((state) => state.CitySlice);
  const [visible1, setVisible1] = useState(false);
  const dispatch = useDispatch();
  const navigate=useNavigate()
  const handleEXchange = () => {
    dispatch(EXchangeCity());
  };

  const handleTime=()=>{
    setVisible1(true)
  }
  const handleToCity=(type)=>{
    navigate(`/city/${type}`)
  }
  return (
    <div>
      <ResultPage status="" title="九州购票平台" description="手提玉剑斥千军">
        <Card>
          <div className={styles.city_top}>
            <span onClick={()=>handleToCity("start")}>{start}</span>
            <Exchange fontSize={30} onClick={() => handleEXchange()} />
            <span onClick={()=>handleToCity("end")}>{end}</span>
          </div>
          <div className={styles.timer}>
            <span onClick={()=>handleTime()}>{date}</span>
          </div>
          <div className={styles.SwitchKg}>
            <Switch></Switch>
            <span>高铁/火车</span>
          </div>
          <Button block color="primary" size="large" shape="rounded">
            查询车票
          </Button>
        </Card>
      </ResultPage>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
          <CalendarPickerView 
          
          onChange={(val)=>{
            dispatch(editchangeTime({date:dayjs(val).format("YYYY-MM-DD")}))
            setVisible1(false)
          }}
          
          />
      </Popup>
    </div>
  );
}

export default Index;
